@extends('admin.layouts.app')

<style>
.custom-filter {
    display: inline-block;
    width: 100%;
}
#test1 {
    width: 15%;
}
.top {
    height:auto !important;
}
th,td {
    text-align: center !important;
}
</style>


@section('right-content')
    <fieldset class="layui-elem-field layui-field-title">
        <legend>数据统计</legend>
    </fieldset>


    <form class="top layui-form">
        <div class="custom-filter">
            <label>时间
                <input type="text" class="layui-input layui-input-inline" name="date" id="test1" value="{{ $date }}">
            </label>
            <label>渠道</label>
            <div class="layui-input-inline">
                <select name="channel" multiple="multiple">
                    <option value="">{{ $channels_str }}</option>
                    <option value="all">全部</option>
                    @foreach ($channels as $val)
                        <option value="{{ $val['distributer_id'] }}">{{ $val['realname'] }}</option>
                    @endforeach
                </select>
            </div>
            <button class="layui-btn" lay-submit lay-filter="search">查询</button>
        </div>
    </form>



    <table id="dateTable" class="layui-table">
        <thead>
        <tr>
            <th>日期</th>
            <th>渠道</th>
            <th>新增</th>
            <th>活跃</th>
            <th>有效活跃</th>
            <th>次日留存率</th>
            <th>付费用户</th>
            <th>付费总额</th>
            <th>付费率</th>
            <th>ARPU</th>
            <th>ARPPU</th>
        </tr>
        </thead>
        <tbody>
        @foreach($res as $key => $value)
            <tr>
                <td>{{ $value['date'] }}</td>
                <td>{{ $value['channel'] }}</td>
                <td>{{ $value['new'] }}</td>
                <td>{{ $value['active'] }}</td>
                <td>{{ $value['valid_active'] }}</td>
                <td>{{ $value['retention_rate'] }}</td>
                <td>{{ $value['pay'] }}</td>
                <td>{{ sprintf('%.2f', $value['pay_amount']) }}</td>
                <td>{{ $value['pay_rate'] }}</td>
                <td>{{ sprintf('%.2f', $value['arpu']) }}</td>
                <td>{{ sprintf('%.2f', $value['arppu']) }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>

@endsection

@section('my-js')
<script type="text/javascript" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('admin/js/table-tool.js') }}"></script>
<script type="text/javascript" src="{{ asset('admin/js/layui-mz-min.js') }}"></script>
<script type="text/javascript">
    layui.use(['layer', 'laydate', 'jquery', 'form'], function() {
        var $ = layui.jquery,laydate = layui.laydate,layer = layui.layer,form = layui.form;

        layui.selMeltiple($);

        // 初始化表格
        $('#dateTable').DataTable({
            // "dom": '<"top"f>rt<"bottom"lp><"clear">',
            "dom": 'rt<"bottom"lp><"clear">',
            "lengthChange": true,
            "autoWidth": true,                     // 自适应宽度
            "stateSave": true,                      // 刷新后保存页数
            'ordering' : false,
            "searching": true,                     // 本地搜索
            "info": true,                           // 控制是否显示表格左下角的信息
            "stripeClasses": ["odd", "even"],       // 为奇偶行加上样式，兼容不支持CSS伪类的场合
            "pagingType": "simple_numbers",         // 分页样式 simple,simple_numbers,full,full_numbers
            "language": {                           // 国际化
                "url":"{{ asset('admin/language.json') }}"
            },
            "columnDefs": [{
                "targets": 0,
                'width': '10%',
            }],
            initComplete: function() {
                // $('.top').append('<div class="custom-filter"><label>时间: <input type="text" class="layui-input layui-input-inline" id="test1"></label><label>渠道: </label></div>');
            }
        });

        var date = new Date();
        var today = date.toLocaleDateString();

        laydate.render({
            elem : '#test1',
            type : 'date',
            range: '~',
            max  : today,
        });

        form.on('submit(search)', function(data) {
            console.log(data.field);

            // return false;
        })
    })

</script>
@endsection